<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地"/>
    <title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery核心js文件 -->
    <script src="javascript/jQuery-1.12.4.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>


    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/top.css" rel="stylesheet"/>
    <link href="css/foot.css" rel="stylesheet"/>

    <link href="css/center.css" rel="stylesheet"/>
    <script src="javascript/center.js"></script>

</head>

<body>
<!--  最顶部的导航栏 -->
<div class="top-nav">
    <div class="container">
        <div>
            <span class="location-top fl iconfont mr5">&#xe60b;</span>
            <span class="fl mr420">上海</span>
        </div>

        <ul>
            <li><a href="#">我的购物车</a></li>
            <li class="spacer">|</li>
            <li><a href="#">我的订单</a></li>
            <li class="spacer">|</li>
            <li>
                <a href="login.html">你好,请登录</a>
                &nbsp;&nbsp;
                <a class="free-login">免费注册</a>
            </li>
        </ul>
    </div>
</div>

<!--  =================== head =============================== -->
<div class="head">
    <div class="container">
        <!-- ============= logo ============= -->
        <div class="logo fl">
            <h1>
                <a class="hot-word">蜗牛学苑</a>
            </h1>
        </div>
        <!-- ============= 搜索框部份 ============= -->
        <div class="search fl ml100">
            <div class="up">
                <div class="search-box fl mr18">
                    <input class="fl" type="text" value="请输入搜索关键字"/>
                    <span class="photo">&#xe663;</span>
                    <span class="search-icon fl">&#xe660;</span>
                </div>

                <div class="cart fl">
                    <span class="iconfont">&#xe622;</span>
                    <a>我的购物车</a>
                    <i class="num">0</i>
                </div>
            </div>

            <div class="navitems">
                <ol>
                    <li><a class="red-and-weight" href="#">秒杀</a></li>
                    <li><a class="red-and-weight" href="#">优惠券</a></li>
                    <li><a href="#">程序设计</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">网络与数据通信</a></li>
                    <li><a href="#">科普读物</a></li>
                    <li><a href="#">建筑学</a></li>
                </ol>
            </div>

        </div>
    </div>
</div>


<!-- ==================== 个人信息中心 ==================== -->
<div class="container no-padding center">
    <div class="row">
        <div class="col-xs-3 no-padding">
            <div class="account-info">
                <img id="userImg" src="img/user/01.jpg" alt="更换头像" data-toggle="modal" data-target="#myModal"/>
                <p class="account">Jack</p>
                <p>
                    <a href="#" id="account-detail">账号信息</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" id="account-address">收货地址</a>
                </p>

                <div class="row member">
                    <div class="col-xs-7 no-padding">
                        <span>开通书城会员尊享</span>
                        <span>全年360元运费礼券</span>
                    </div>
                    <div class="col-xs-5 no-padding">
                        <a href="#">立即开通</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-9">
            <div class="order-title">我的订单：</div>
            <div class="order-option">
                <div class="col-xs-2 col-xs-offset-1">
                    <div class="op">
                        <span class="iconfont">&#xe644;</span>
                        <a href='#'>待付款</a>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="op">
                        <span class="iconfont">&#xe771;</span>
                        <a href='#'>待收货</a>
                    </div>

                </div>
                <div class="col-xs-2">
                    <div class="op">
                        <span class="iconfont">&#xe605;</span>
                        <a href='#'>待评价</a>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="op">
                        <span class="iconfont">&#xe699;</span>
                        <a href='#'>退换/售后</a>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="op">
                        <span class="iconfont">&#xe737;</span>
                        <a href='#'>全部订单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ========================= 详细信息显示位置 ========================== -->
<div class="container no-padding center">
    <div id="showAll">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">账号信息</a></li>
            <li role="presentation"><a href="#">收货地址</a></li>
            <li role="presentation"><a href="#">新增地址</a></li>
        </ul>
        <!-- 账号详细信息 -->
        <div class="account-detail" style="display: none;">

            <form id="form-account-detail" class="form-horizontal mt15">
                <div class="form-group">
                    <label class="col-xs-2 control-label">账号:</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control" value="jack" disabled>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">手机:</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control" value="15655667788" disabled>
                    </div>
                    <button type="button" class="btn btn-default col-xs-1" data-toggle="modal" data-target="#myModal01">
                        修改
                    </button>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">密码:</label>
                    <div class="col-xs-6">
                        <input type="password" class="form-control" value="123456" disabled>
                    </div>
                    <button type="button" class="btn btn-default col-xs-1">修改</button>
                </div>
            </form>

        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel"> 修改</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="edit()">修改</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- 地址详细信息 -->
        <div class="account-address" style="display: none;">
            <table class="table table-striped">
                <tr>
                    <td>默认</td>
                    <td>收货人</td>
                    <td>手机</td>
                    <td>详细地址</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>张三</td>
                    <td>13355667788</td>
                    <td>上海浦东</td>
                </tr>
            </table>
        </div>


        <!-- 新增地址 -->
        <div class="account-newadd" style="display: none;">
            <form id="form-newadd" class="form-horizontal mt15">
                <div class="form-group">
                    <label class="col-xs-2 col-xs-offset-1 control-label">收货人:</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 col-xs-offset-1 control-label">联系电话:</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control">
                    </div>
                </div>

                <div class="form-inline">
                    <label class="col-xs-2 col-xs-offset-1 control-label">收货地址:</label>
                    <div class="col-xs-5">

                        <select id="province" class="form-control">
                            <option>请选择省份</option>
                        </select>

                        <select id="city" class="form-control">
                            <option>请选择城市</option>
                        </select>

                        <select id="country" class="form-control">
                            <option>请选择区县</option>
                        </select>
                    </div>
                </div>


                <div class="form-group"></div>

                <div class="form-group">
                    <label class="col-xs-2 col-xs-offset-1 control-label">详细地址:</label>
                    <div class="col-xs-6">
                        <input type="text" class="form-control">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-xs-3 col-xs-offset-3">
                        <input type="submit" class="btn btn-primary btn-block">
                    </div>
                    <div class="col-xs-3">
                        <input type="reset" class="btn btn-info btn-block">
                    </div>
                </div>

            </form>

        </div>

    </div>
</div>


<!-- 修改头像模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">

                <div class="img-box">
                    <div class="account-img col-xs-2 no-padding">
                        <img src="http://localhost/user/01.jpg">
                    </div>
                    <div class="account-img col-xs-2 no-padding">
                        <img src="http://localhost/user/02.jpg">
                    </div>
                    <div class="account-img col-xs-2 no-padding">
                        <img src="http://localhost/user/03.jpg">
                    </div>
                    <div class="account-img col-xs-2 no-padding">
                        <img src="http://localhost/user/04.jpg">
                    </div>
                    <div class="account-img col-xs-2 no-padding">
                        <img src="http://localhost/user/05.jpg">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
                <button type="button" class="btn btn-default" onclick="doEditImg()">确定修改</button>
            </div>
        </div>
    </div>
</div>


<!-- =============== 最后的网站底部 =============== -->
<div class="container-fluid" id="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <dl>
                    <dt><b>热线电话</b></dt>
                    <dd id="tel"><i>020-000000</i></dd>
                    <dd class="openDate">周一至周五9:00-21:00</dd>
                    <dd class="openDate">周六至周日9:00-17:30</dd>
                    <dd><a href="#">在线客服</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt><b>服务保障</b></dt>
                    <dd><a href="#">正品保证</a></dd>
                    <dd><a href="#">7天无理由退换</a></dd>
                    <dd><a href="#">退货返运费</a></dd>
                    <dd><a href="#">7X15小时客户服务</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt><b>支付方式</b></dt>
                    <dd><a href="#">公司转账</a></dd>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">在线支付</a></dd>
                    <dd><a href="#">分期付款</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt><b>商家服务</b></dt>
                    <dd><a href="#">商家信息</a></dd>
                    <dd><a href="#">培训中心</a></dd>
                    <dd><a href="#">广告服务</a></dd>
                    <dd><a href="#">服务市场</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt><b>物流配送</b></dt>
                    <dd><a href="#">免运费</a></dd>
                    <dd><a href="#">海外配送</a></dd>
                    <dd><a href="#">EMS</a></dd>
                    <dd><a href="#">211限时达</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt><b>关注我们</b></dt>
                    <img src="img/code.png">
                </dl>
            </div>
        </div>

    </div>
</div>

</body>

</html>
